<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <style>
        body {
            font-family: 'Segoe UI', system-ui;
            background-image: url("{% static 'images/ChatGPT_Image1.png' %}");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        h1 {
            color: #cb87e8;
            font-size: 2.5rem;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 新增阴影效果 */
        }
        .button-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        button {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        button:hover {
            background: #1557b0;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .data-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            border-radius: 12px;
            overflow: hidden;
        }
        
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgba(238, 238, 238, 0.5);
        }
        
        th {
            background: rgba(248, 249, 250, 0.7);
            color: #666;
            font-weight: 600;
        }
        
        tr:hover {
            background: rgba(248, 249, 250, 0.5);
        }
    </style>
    <style>
        .dashboard-header {
            background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
            color: white;
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
        }
        .control-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 12px;
        }
        button {
            padding: 12px 20px;
            border-radius: 8px;
            background: #1a73e8;
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        button:hover {
            background: #1557b0;
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
    <script>
        function sendMessage(labNumber) {
            fetch('/back/publish/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({
                    topic: '/door',
                    message: JSON.stringify({
                        lab_number: labNumber || "404",
                        operation: "OPEN"
                    })
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Publish response:', data);
            });
        }
        function openDoor() {
            fetch('/back/door_control/', {  // 修改为新的路由地址
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({
                    action: 'unlock',
                    value: 1
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Door control response:', data);
            });
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>基于ESP32S3的实验室门禁系统设计与实现</h1>
        <div class="button-container">
            <button onclick="sendMessage('T101')">实验室T101开门</button>
            <button onclick="sendMessage('T102')">实验室T102开门</button>
            <button onclick="sendMessage('T103')">实验室T103开门</button>
            <button onclick="sendMessage('T104')">实验室T104开门</button>
            <button onclick="sendMessage('T105')">实验室T105开门</button>
            <button onclick="sendMessage('T106')">实验室T106开门</button>
            <button onclick="sendMessage('T107')">实验室T107开门</button>
            <button onclick="sendMessage('T108')">实验室T108开门</button>
            <button onclick="location.href='{% url 'back:write_card' %}'">录入卡号</button>
            <button onclick="location.href='{% url 'back:write_finger' %}'">录入指纹</button>
            <button onclick="location.href='{% url 'back:write_password' %}'">录入密码</button>
            <button onclick="location.href='{% url 'back:logout' %}'" 
                    style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                退出登录
            </button>
        </div>

        <h2>实时数据</h2>
        <table>
            <tr>
                <th>卡ID</th>
                <th>信息</th>
                <th>时间戳</th>
            </tr>
            {% for data in environment_data %}
            <tr>
                <td>{{ data.card_number }}</td>
                <td>{{ data.information }}</td>
                <td>{{ data.timestamp }}</td>
            </tr>
            {% endfor %}
        </table>

        <h2>已有卡信息</h2>
        <table>
            <thead>
                <tr style="background: #f8f9fa;">
                    <th style="padding: 15px; border-radius: 8px 0 0 0;">卡ID</th>
                    <th style="padding: 15px;">信息</th>
                    <th style="padding: 15px; border-radius: 0 8px 0 0;">时间戳</th>
                </tr>
            </thead>
            <tbody>
                {% for data in environment_data %}
                <tr style="transition: background 0.3s ease;">
                    <td style="padding: 12px;">{{ data.card_number }}</td>
                    <td style="padding: 12px;">{{ data.information }}</td>
                    <td style="padding: 12px;">{{ data.timestamp }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
            {% for card in card_data %}
            <tr>
                <td>{{ card.card_number }}</td>
                <td>{{ card.information }}</td>
                <td>{{ card.timestamp }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</body>
</html>
